<template>
	<view class="cardListBox">
		<view class="tabNav">
			<view class="tabItem" v-for="(item, index) in tabList" :key="index" v-if="index!=0||bottomTab == 'quan'"
				@click="setTabName(item)" :style="{color:tabIndex == item.tabCode?defaultColor:null}">
				<view>{{ item.tabName }}</view>
			</view>
		</view>
		<view v-if="bottomTab == 'quan'">
			<view class="ticketList" v-if="ticketsHistoryList&&ticketsHistoryList.length != 0">
				<view class="item-box" v-for="(item,index) in ticketsHistoryList" :key="index">
					<view class="touch-list ticketItem" @touchstart="touchS" @touchmove="touchM" @touchend="touchE"
						:data-index="index"
						:style="{ backgroundImage: `url(${item.bg})`,left:item.txtStyle}">
						<view class="left">
							<view>{{item.type===4?`${item.couponAmount}折`:`￥${item.couponAmount||'-'}`}}</view>
							<view>{{ item.applyStationType =='1'?'所有站点':item.applyStationType =='2'?'指定站点':'指定条件' }}
								<view>{{item.usableStatus==1?'全天可用':'限定时段'}}</view>
							</view>
						</view>
						<view class="right">
							<view>
								<view style="font-size: 34rpx;font-weight: 500;">
									{{['服务费券','电费券','现金券','折扣券'][item.type-1]}}
								</view>
							</view>
							<view>满￥{{ item.meetAmount }}可用</view>
							<view>
								<view>
									<view>始</view>
									<view> {{ item.receiveTime }}</view>

								</view>
								<view>
									<view>止</view>
									<view> {{ item.expireTime }}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="touch-list del-box" :data-id="index" @click="toDelete(item)">
						删除
					</view>
				</view>
			</view>
			<view v-else>
				<Upgrading text="暂无数据"></Upgrading>
			</view>
		</view>
		<view v-if="bottomTab == 'ka'">
			<view class="ticketList" v-if="cardsHistoryList&&cardsHistoryList.length != 0">
				<view class="item-box ka-item-box" v-for="(item,index) in cardsHistoryList" :key="index">
					<view class="touch-list cardsItem" @touchstart="touchS" @touchmove="touchM" @touchend="touchE"
						:data-index="index"
						:style="{ backgroundImage: `url(${item.bg})`,left:item.txtStyle }">
						<view class="top">
							<view class="left">
								<view style="width: 300rpx;height: 42rpx;font-size: 34rpx;color: #4b2312;">
									{{item.type == 1? "电量卡": item.type == 2? "折扣卡": item.type == 3? "金额卡": "次数卡"}}
								</view>
								<view>{{ item.restrictStr}} |
									{{ item.applyStationType == 1?'所有站点':item.applyStationType==2?'指定站点':'指定条件' }}
								</view>
							</view>
							<view class="right" v-if="item.type!=2">
								<view>{{ item.availableDegrees }}</view>
								<view>/{{ item.amount }}{{ item.type == 1?'度':item.type == 4?'次':'' }}</view>
							</view>
							<view class="right" v-if="item.type==2">
								<view>{{ item.amount}}</view>
								<view>折</view>
							</view>
						</view>
						<view>
							有效期：
							<text>{{ item.fixedStartTime }}</text>至<text>{{ item.fixedEndTime }}</text>
						</view>
					</view>
					<view class="touch-list del-box" :data-id="index" @click="toDelete(item)">
						删除
					</view>
				</view>
			</view>
			<view v-else>
				<Upgrading text="暂无数据"></Upgrading>
			</view>
		</view>
		<view v-if="bottomTab == 'quanyi'">
			<view class="ticketList" v-if="quanyiHistoryList&&quanyiHistoryList.length != 0">
				<view class="item-box" v-for="(item,index) in quanyiHistoryList" :key="index">
					<view class="ticketItem" @touchstart="touchS" @touchmove="touchM" @touchend="touchE" :data-index="index"
						:style="{ backgroundImage: `url(${item.bg})`,left:item.txtStyle}">
						<view class="left">
							<view>{{ item.equityName }}</view>
						</view>
						<view class="right">
							<view>享受权益：{{ item.rewardNum }}</view>
							<view>到期时间：{{ item.equityEndTime }}</view>
						</view>
					</view>
					<view class="touch-list del-box" :data-id="index" @click="toDelete(item)">
						删除
					</view>
				</view>
			</view>
			<view v-else>
				<Upgrading text="暂无数据"></Upgrading>
			</view>
		</view>
		<view style="height:102rpx"></view>
		<view></view>
		<view></view>
		<view></view>
		<view></view>
		<view></view>
		<view class="bottom_button">
			<view @click="setBottomTabName('quan')" :style="{'color':bottomTab == 'quan'?defaultColor:null }" class="button">
				<view class="icon"
					:style="{ 'backgroundImage': 'url(' + `${bottomTab == 'quan'?quan_icon_checked:quan_icon}` + ')' }">
				</view>
				券
			</view>
			<view @click="setBottomTabName('ka')" :style="{'color':bottomTab == 'ka'?defaultColor:null }" class="button">
				<view class="icon"
					:style="{ 'backgroundImage': 'url(' + `${bottomTab == 'ka'?ka_icon_checked:ka_icon}` + ')' }">
				</view>
				卡
			</view>
			<view @click="setBottomTabName('quanyi')" :style="{'color':bottomTab == 'quanyi'?defaultColor:null }"
				class="button">
				<view class="icon"
					:style="{ 'backgroundImage': 'url(' + `${bottomTab == 'quanyi'?quanyi_icon_checked:quanyi_icon}` + ')' }">
				</view>
				权益
			</view>
		</view>
		<u-modal :show="showDelete" :showCancelButton="true" title="提示" content='确定要删除吗？' confirmText="确认" cancelText="取消"
			:confirmColor="defaultColor" @cancel="cancel" @confirm="confirm"></u-modal>
	</view>
</template>

<script>
	import {
		getMyCouponPage
	} from "@/api/https";
	import {
		historyCardList,
		historyCouponList,
		historyEquityList,
		deleteCoupon,
		deleteCard,
		deleteEquity
	} from "@/api/marketing/coupon";

	import Upgrading from '@/components/upgrading/upgrading';
	const app = getApp();
	export default {
		components: {
			Upgrading,
		},
		data() {
			return {
				delBtnWidth: 70,
				startX: '',

				defaultColor: uni.getStorageSync('defaultColor_Green'),
				ticket_bg: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/line_bg.png`,
				card1_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/card1_icon.png`,
				card2_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/card2_icon.png`,
				quanyi1_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/quanyi1.png`,
				duihuanma1_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/duihuanma1.png`,
				yishiyongquanyi_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/yishiyongquanyi.png`,
				yishixiaoquanyi_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/yishixiaoquanyi.png`,
				line_bg_yishiyong_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/line_bg_yishiyong.png`,
				line_bg_yiguoqi_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/line_bg_yiguoqi_icon.png`,
				line_bg_yizuofei_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/line_bg_yizuofei_icon.png`,
				line_bg_yishixiao_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/line_bg_yishixiao.png`,
				kayishiyong_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/kayishiyong.png`,
				kayishixiao_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/kayishixiao.png`,
				kayiguoqi_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/line_bg_yiguoqi.png`,
				kayizuofei_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/kayizuofei_icon.png`,
				bottomTab: 'quan',
				quan_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/icon-quan.png`,
				ka_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/icon-ka.png`,
				quanyi_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/icon-quanyi.png`,
				quan_icon_checked: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/icon-quan-s.png`,
				ka_icon_checked: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/icon-ka-s.png`,
				quanyi_icon_checked: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/icon-quanyi-s.png`,
				tabIndex: 'isUse',
				tabList: [{
						tabCode: 'isUse',
						tabName: '已使用',
						// tabNum: 0,
					},
					{
						tabCode: 'shixiao',
						tabName: '已过期',
						// tabNum: 0,
					},
				],
				ticketsHistoryList: [],
				cardsHistoryList: [],
				quanyiHistoryList: [],
				item: {},
				showDelete: false,
				type: 1,
				memberType: 1
			};
		},
		onLoad() {
			this.getHistoryCouponsList();
		},
		methods: {
			// 卡
			getHistoryCardsList() {
				historyCardList(this.type, this.memberType).then(res => {
					if (res.code == 200) {
						if (res.data && res.data.length != 0) {
							res.data.forEach(item => {
								item.txtStyle = "0px"
								// 卡券状态(1-未领取、2-未生效、3-未使用、4-已使用、5-已过期、6-已作废, 7 => 退款冻结, 8 => 退款核销)
								if(item.status == 4){
									item.bg = this.kayishiyong_icon
								}
								if(item.status == 5){
									item.bg = this.kayiguoqi_icon
								}
								if(item.status == 6 || item.status == 8){
									item.bg = this.kayizuofei_icon
								}
							})
						}
						this.cardsHistoryList = res.data;
						console.log(this.cardsHistoryList)
						this.$set(this.cardsHistoryList)
					}
				})
			},
			// 优惠券
			getHistoryCouponsList() {
				historyCouponList(this.type, this.memberType).then(res => {
					if (res.code == 200) {
						if (res.data && res.data.length != 0) {
							res.data.forEach(item => {
								item.txtStyle = "0px"
								// 优惠券状态(1-未领取、2-未生效、3-未使用、4-已使用、5-已过期、6-已作废, 7 => 退款冻结, 8 => 退款核销)
								if(item.status == 4){
									item.bg = this.line_bg_yishiyong_icon
								}
								if(item.status == 5){
									item.bg = this.line_bg_yiguoqi_icon
								}
								if(item.status == 6 || item.status == 8){
									item.bg = this.line_bg_yizuofei_icon
								}
							})
							
						} else {

						}
						this.ticketsHistoryList = res.data
						this.$set(this.ticketsHistoryList)
					}
				})
			},
			// 权益
			getHistoryEquitysList() {
				historyEquityList(this.type, this.memberType).then(res => {
					if (res.code == 200) {
						if (res.data && res.data.length != 0) {
							res.data.forEach(item =>{
								 item.txtStyle = "0px"
								 
								// 权益状态(1 => 未生效, 2 => 生效中, 3 => 已过期, 4 => 已作废)"  最新的
								if(item.status == 3){
									item.bg = this.line_bg_yiguoqi_icon
								}
								if(item.status == 4){
									item.bg = this.line_bg_yizuofei_icon
								}
							})
						}
						console.log(res.data)
						this.quanyiHistoryList = res.data
						this.$set(this.quanyiHistoryList)
					}
				})
			},
			touchS: function(e) {
				if (e.touches.length == 1) {
					//设置触摸起始点水平方向位置
					this.startX = e.touches[0].clientX
				}
			},
			touchM: function(e) {
				if (e.touches.length == 1) {
					//手指移动时水平方向位置
					var moveX = e.touches[0].clientX;
					//手指起始点位置与移动期间的差值
					var disX = this.startX - moveX;
					var delBtnWidth = this.delBtnWidth;
					var txtStyle = "";
					if (disX == 0 || disX < 0) { //如果移动距离小于等于0，说明向右滑动，文本层位置不变
						txtStyle = "0px";
					} else if (disX > 0) { //移动距离大于0，文本层left值等于手指移动距离
						txtStyle = "-" + disX + "px";
						if (disX >= delBtnWidth) {
							//控制手指移动距离最大值为删除按钮的宽度
							txtStyle = "-" + delBtnWidth + "px";
						}
					}
					//获取手指触摸的是哪一项
					var index = e.currentTarget.dataset.index;
					if (this.bottomTab == 'quan' && this.ticketsHistoryList.length != 0) {
						var list = this.ticketsHistoryList
						list[index].txtStyle = txtStyle;
						this.ticketsHistoryList = list;
					}
					if (this.bottomTab == 'ka' && this.cardsHistoryList.length != 0) {
						var list = this.cardsHistoryList
						list[index].txtStyle = txtStyle;
						this.cardsHistoryList = list;
					}
					if (this.bottomTab == 'quanyi' && this.quanyiHistoryList.length != 0) {
						var list = this.quanyiHistoryList
						list[index].txtStyle = txtStyle;
						this.quanyiHistoryList = list;
					}
				}
			},
			touchE: function(e) {
				if (e.changedTouches.length == 1) {
					//手指移动结束后水平位置
					var endX = e.changedTouches[0].clientX;
					//触摸开始与结束，手指移动的距离
					var disX = this.startX - endX;
					var delBtnWidth = this.delBtnWidth;
					//如果距离小于删除按钮的1/2，不显示删除按钮
					var txtStyle = disX > delBtnWidth / 2 ? "-" + delBtnWidth + "px" : "0px";
					//获取手指触摸的是哪一项
					var index = e.currentTarget.dataset.index;
					if (this.bottomTab == 'quan') {
						var list = this.ticketsHistoryList
						list[index].txtStyle = txtStyle;
						this.ticketsHistoryList = list;
					}
					if (this.bottomTab == 'ka') {
						var list = this.cardsHistoryList
						list[index].txtStyle = txtStyle;
						this.cardsHistoryList = list;
					}
					if (this.bottomTab == 'quanyi') {
						var list = this.quanyiHistoryList
						list[index].txtStyle = txtStyle;
						this.quanyiHistoryList = list;
					}
				}
			},
			cancel() {
				this.showDelete = false;
			},
			confirm() {
				if (this.bottomTab == 'quan') {
					deleteCoupon({
						id: this.item.id
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '删除成功!',
								icon: 'none'
							});
							this.getHistoryCardsList()
							this.showDelete = false;
						} else {
							uni.showToast({
								title: '删除失败！',
								icon: 'none'
							});
						}
					})
				}
				if (this.bottomTab == 'ka') {
					deleteCard({
						id: this.item.id
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '删除成功!',
								icon: 'none'
							});
							this.getHistoryCardsList();
							this.showDelete = false;
						} else {
							uni.showToast({
								title: '删除失败！',
								icon: 'none'
							});
						}
					})
				}
				if (this.bottomTab == 'quanyi') {
					deleteEquity({
						id: this.item.id
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '删除成功!',
								icon: 'none'
							});
							this.getHistoryEquitysList();
							this.showDelete = false;
						} else {
							uni.showToast({
								title: '删除失败！',
								icon: 'none'
							});
						}
					})
				}
			},
			toDelete(row) {
				this.item = row
				this.showDelete = true;
			},
			setTabName(row) {
				this.tabIndex = row.tabCode;
				if (this.tabIndex == 'isUse') {
					this.type = 1
				} else {
					this.type = 2
				}
				if (this.bottomTab == 'quan') {
					this.getHistoryCouponsList();
				}
				if (this.bottomTab == 'ka') {
					this.type = 2
					this.getHistoryCardsList();
				}
				if (this.bottomTab == 'quanyi') {
					this.type = 2
					this.getHistoryEquitysList();
				}
			},
			setBottomTabName(val) {
				this.bottomTab = val;
				this.tabIndex = 'isUse'
				this.type = 1
				if (val == 'quan') {
					this.getHistoryCouponsList();
				}
				if (val == 'ka') {
					this.type = 2
					this.getHistoryCardsList();
				}
				if (val == 'quanyi') {
					this.type = 2
					this.getHistoryEquitysList();
				}
			},
			toCouponDetail(val, row) {
				console.log(row)
				if (val == 'quan') {
					uni.navigateTo({
						url: './cardVoucherYxTicketDetail'
					});
				}
				if (val == 'ka') {
					uni.navigateTo({
						url: './cardVoucherYxCardDetail'
					});
				}
				if (val == 'quanyi') {
					uni.navigateTo({
						url: './cardVoucherYxEquityDetail'
					});
				}

			},
			getCouponLists() {
				getUserCouponLists().then((res) => {
					console.log(res);
				});
			},
		},
	};
</script>

<style lang="less" scoped>
	@import "../../../commin/commin.less";

	page {
		background-color: #f5f7fa;
		padding-bottom: 220rpx;
	}

	.cardListBox {
		width: 100%;
		min-height: 100vh;
		background: #f5f7fa;
	}

	.tabNav {
		width: 100%;
		height: 90rpx;
		background: #ffffff;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;

		.tabItem {
			flex: 1;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #909399;
		}
	}

	.ticketList,
	.cardsList,
	.quanyisList,
	.redemptionCodesList {
		width: 94%;
		margin: 0rpx auto;

		.cardsItem {
			width: 708rpx;
			height: 246rpx;
			background-size: 110% 133%;
			background-repeat: no-repeat;
			background-position: center;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			box-sizing: border-box;
			overflow: hidden;
			border-radius: 20rpx;
			position: relative;
			transition: left 0.2s ease-in-out;
			z-index: 5;
			padding: 40rpx;
			background-color: aliceblue;

			.top {
				width: 100%;
				height: 246rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: flex-start;
				color: #303133;

				.left {
					>view:nth-of-type(1) {
						font-size: 34rpx;
						font-weight: 400;
						color: #303133;
					}

					>view:nth-of-type(2) {
						margin-top: 20rpx;
						width: 300rpx;
						height: 42rpx;
						text-align: left;
						line-height: 42rpx;
						color: #fff;
						border-radius: 21rpx;
					}
				}

				.right {
					width: 260rpx;
					height: 80rpx;
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					align-items: flex-end;

					>view {
						display: flex;
						flex-direction: row;
						justify-content: flex-end;
						align-items: flex-end;
					}

					>view:nth-of-type(1) {
						height: 80rpx;
						font-size: 48rpx;
						font-weight: bold;
					}

					>view:nth-of-type(2) {
						height: 80rpx;
						font-size: 32rpx;
					}
				}
			}

			>view:nth-of-type(2) {
				width: 100%;
				margin-top: 16rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #606266;
			}

			>view:nth-of-type(3) {
				width: 100%;
				margin-top: 16rpx;
				font-size: 22rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #606266;
			}
		}

		.ticketItem {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;
			position: relative;
			transition: left 0.2s ease-in-out;
			z-index: 5;
			width: 708rpx;
			height: 246rpx;

			.left {
				width: 230rpx;
				height: 246rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				>view:nth-of-type(1) {
					font-size: 34rpx;
					font-weight: 400;
					color: #FFFFFF;
				}

				>view:nth-of-type(2) {
					margin: 10rpx auto;
					font-size: 30rpx;
					font-weight: 400;
					color: #FFFFFF;
				}

				>view:nth-of-type(3) {
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				padding: 32rpx;
				box-sizing: border-box;

				>view:nth-of-type(1) {
					width: 100%;
					font-size: 34rpx;
					font-weight: 400;
					color: #303133;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
				}

				>view:nth-of-type(2) {
					width: 100%;
					margin: 20rpx 0;
					font-size: 26rpx;
					font-weight: 400;
					color: #606266;
				}

				>view:nth-of-type(3) {
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
					font-size: 24rpx;
					font-weight: 400;
					color: #909399;

					>view {
						width: 100%;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;

						>view:nth-of-type(1) {
							width: 24rpx;
							height: 24rpx;
							border-radius: 50%;
							border: 1rpx solid #909399;
							color: #909399;
							font-size: 20rpx;
							text-align: center;
							line-height: 24rpx;
						}

						>view:nth-of-type(2) {
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}
	
	// .ka-item-box{
	// 	height: 192rpx !important;
	// 	padding:15rpx !important;
	// 	.cardsItem{
	// 		height: 200rpx !important;
	// 	}
	// 	.del-box{
	// 		height: 192rpx !important;
	// 	}
	// 	.top{
	// 		 .right{
	// 			 height: 40rpx !important;
	// 			 >view:nth-of-type(1) {
	// 			 	height: 40rpx !important;
	// 			 }
				 
	// 			 >view:nth-of-type(2) {
	// 			 	height: 40rpx !important;
	// 			 }
	// 		 }
	// 	}
	// }
	.bottom_button {
		width: 100%;
		height: 102rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;

		.button {
			width: 120rpx;
			height: 100%;
			text-align: center;
			font-size: 22rpx;
			font-weight: 400;
			color: #A4B1C2;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;

			.icon {
				width: 38rpx;
				height: 38rpx;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				background-position: center;
				margin-top: 16rpx;
			}
		}
	}


	.quanyiItem {
		height: 246rpx;
		margin: 20rpx auto 80rpx auto;
		padding: 40rpx;
		box-sizing: border-box;
		background-size: 100% 102%;
		background-repeat: no-repeat;
		background-position: center;
		position: relative;
		width: 100%;
		transition: left 0.2s ease-in-out;
		z-index: 5;

		>view:nth-of-type(1) {
			font-size: 34rpx;
			font-weight: 400;
			line-height: 34rpx;
			color: #303133;

		}

		>view:nth-of-type(2) {
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(96, 98, 102, 0.8);
			line-height: 26rpx;
			margin-top: 30rpx;
		}

		>view:nth-of-type(3) {
			margin-top: 50rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(96, 98, 102, 0.6);
			line-height: 24rpx;
		}

		.delete {
			width: 100rpx;
			height: 40rpx;
			color: red;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			position: absolute;
			right: 0;
			bottom: -45rpx;
		}
	}

	.redemptionCodeItem {
		width: 100%;
		height: 246rpx;
		margin: 20rpx auto;
		padding: 40rpx;
		box-sizing: border-box;
		background-size: 100% 102%;
		background-repeat: no-repeat;
		background-position: center;

		>view:nth-of-type(1) {
			font-size: 34rpx;
			font-weight: 400;
			color: #AF5239;

		}

		>view:nth-of-type(2) {
			font-size: 26rpx;
			font-weight: 400;
			color: #AF5239;
			margin-top: 30rpx;
		}

		>view:nth-of-type(3) {
			margin-top: 50rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #AF5239;
		}
	}

	.item-box {
		position: relative;
		overflow: hidden;
		height: 246rpx;
		margin: 20rpx 0;

		.touch-list {
			position: absolute;
			top: 0;
			overflow: hidden;
			white-space: nowrap;
		}
	}

	.del-box {
		right: 0;
		float: left;
		width: 140rpx;
		height: 246rpx;
		background: #FC724C;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		border-radius: 0 20rpx 20rpx 0;
	}
</style>